<template>
  <div class='w-100 '>
    <div id='g6'></div>
  </div>
</template>

<script>
  import G6 from '@antv/g6';
  import axios from 'axios';
  export default {
    data() {
      return {
        g6_data: {
          nodes: [],
          edges: []
        },
      };
    },
    methods: {},
    mounted() {
      const container = document.getElementById('g6');
      const width = container.scrollWidth;
      const height = (container.scrollHeight || 500) - 20;
      const graph = new G6.Graph({
        container: 'g6',
        width,
        height,
        // fitViewPadding: [20, 40, 50, 20],
        modes: {
          default: ['drag-canvas', 'zoom-canvas', 'drag-node', 'lasso-select'],
        },
        layout: {
          type: 'force',
          preventOverlap: true,
          linkDistance: (d) => {
            if (d.source.core === 1) {
              return 300;
            }
            return 80;
          },
          nodeStrength: (d) => {
            if (d.leaf === 1) {
              return -50;
            }
            return -10;
          },
          edgeStrength: (d) => {
            if (d.source.leaf === 1) {
              return 0.7;
            }
            return 0.1;
          },
        },
        // // 节点默认配置
        // defaultNode: {
        //   size: 50,
        //   style: {
        //     fill: 'steelblue',
        //     stroke: 'gray'
        //   },
        //   labelCfg: {
        //     style: {
        //       fill: '#fff',
        //       stroke: 'green'
        //     },
        //   },
        // },
        // // 边默认配置
        // defaultEdge: {
        //   style: {
        //     opacity: 0.7,
        //     fill: 'red',
        //   },
        //   labelCfg: {
        //     autoRotate: true,
        //   },
        // },
        // // 节点在各状态下的样式
        // nodeStateStyles: {
        //   // hover 状态为 true 时的样式
        //   hover: {
        //     fill: 'lightsteelblue',
        //   },
        //   // click 状态为 true 时的样式
        //   click: {
        //     stroke: '#000',
        //     lineWidth: 3,
        //   },
        // },
        // // 边在各状态下的样式
        // edgeStateStyles: {
        //   // click 状态为 true 时的样式
        //   click: {
        //     stroke: 'steelblue',
        //   },
        // },

      });

      const main = async () => {
        const response = await axios({
          // url: 'http://10.222.2.203:7001/test02',
          url: 'http://10.222.2.203:7001/topo01',
        }).then((res) => {
          return res.data
          // this.g6_data.nodes = res.data.nodes
          // this.g6_data.edges = res.data.edges
          // console.log(this.g6_data.nodes)
        }).catch((err) => {
          console.log('error')
        });

        const remoteData = response

        const nodes = remoteData.nodes;
        const edges = remoteData.edges;


        // nodes.forEach((node) => {
        //   if (!node.style) {
        //     node.style = {};
        //   }
        //   node.style.lineWidth = 1;
        //   node.style.stroke = '#666';
        //   node.style.fill = 'steelblue';
        //   switch (node.class) {
        //     case 'c0': {
        //       node.type = 'circle';
        //       node.size = 30;
        //       break;
        //     }
        //     case 'c1': {
        //       node.type = 'rect';
        //       node.size = [35, 20];
        //       break;
        //     }
        //     case 'c2': {
        //       node.type = 'ellipse';
        //       node.size = [35, 20];
        //       break;
        //     }
        //   }
        // });
        // edges.forEach((edge) => {
        //   if (!edge.style) {
        //     edge.style = {};
        //   }
        //   edge.style.lineWidth = edge.weight;
        //   edge.style.opacity = 0.6;
        //   edge.style.stroke = 'grey';
        // });
        graph.data(remoteData);
        graph.render();

        let centerNodes = graph.getNodes().filter((node) => node.getModel().isLeaf != 1);

        graph.on('afterlayout', () => {
          const hull1 = graph.createHull({
            id: 'centerNode-hull',
            type: 'bubble',
            // members: ['vEOS-01', 'nxos-84'],
            members: centerNodes,
            padding: 10,
          });

          const hull2 = graph.createHull({
            id: 'leafNode-hull1',
            members: ['vEOS-2', 'vEOS-03'],
            padding: 10,
            style: {
              fill: 'lightgreen',
              stroke: 'green',
            },
          });

          const hull3 = graph.createHull({
            id: 'leafNode-hull2',
            members: ['vEOS04', 'vMX-20.4R1.12'],
            padding: 10,
            style: {
              fill: 'lightgreen',
              stroke: 'green',
            },
          });

          graph.on('afterupdateitem', (e) => {
            hull1.updateData(hull1.members);
            hull2.updateData(hull2.members);
            hull3.updateData(hull3.members);
          });
        });

        if (typeof window !== 'undefined')
          window.onresize = () => {
            if (!graph || graph.get('destroyed')) return;
            if (!container || !container.scrollWidth || !container.scrollHeight) return;
            graph.changeSize(container.scrollWidth, container.scrollHeight - 20);
          };


        // // 监听鼠标进入节点
        // graph.on('node:mouseenter', (e) => {
        //   const nodeItem = e.item;
        //   // 设置目标节点的 hover 状态 为 true
        //   graph.setItemState(nodeItem, 'hover', true);
        // });
        // // 监听鼠标离开节点
        // graph.on('node:mouseleave', (e) => {
        //   const nodeItem = e.item;
        //   // 设置目标节点的 hover 状态 false
        //   graph.setItemState(nodeItem, 'hover', false);
        // });
        // // 监听鼠标点击节点
        // graph.on('node:click', (e) => {
        //   // 先将所有当前有 click 状态的节点的 click 状态置为 false
        //   const clickNodes = graph.findAllByState('node', 'click');
        //   clickNodes.forEach((cn) => {
        //     graph.setItemState(cn, 'click', false);
        //   });
        //   const nodeItem = e.item;
        //   // 设置目标节点的 click 状态 为 true
        //   graph.setItemState(nodeItem, 'click', true);
        // });
        // // 监听鼠标点击节点
        // graph.on('edge:click', (e) => {
        //   // 先将所有当前有 click 状态的边的 click 状态置为 false
        //   const clickEdges = graph.findAllByState('edge', 'click');
        //   clickEdges.forEach((ce) => {
        //     graph.setItemState(ce, 'click', false);
        //   });
        //   const edgeItem = e.item;
        //   // 设置目标边的 click 状态 为 true
        //   graph.setItemState(edgeItem, 'click', true);
        // });
      };
      main();
    }
  }
</script>

<style>
  #g6 {
    /* width: 100%; */
    height: 800px;
    /* background-color: aquamarine; */
  }
</style>
